<template>
	<view v-if="info" class="detail">
		<view class="list">
			<view class="item">
				<view class="tops">
					<view class="left">
						<view v-if="info.gender=='MALE'" class="photo">
							男
						</view>
						<view v-else class="photo girl">
							女
						</view>
						<view class="names">
							<view class="name">
								<view class="fullname">{{info.customerName}}</view>
								<!-- <view class="phone">17782561061</view> -->
								
							</view>
							<view class="code">
								客户编号：{{info.customerNo}}
								<view @click.stop="copyTextToClipboard(info.customerNo)" class="copy">
									复制
								</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view v-if="info.customerStatus=='CANCEL'" class="status">
							已作废
						</view>
						<view v-else-if="info.customerStatus=='APP'" class="status app">
							已转APP
						</view>
						<view v-else class="status doing">
							维护中
						</view>

					</view>
				</view>
			</view>
		</view>

		<view class="step">
			<view class="info">
				<view class="name">
					<image src="https://oss.6mate.cn/mini/Permissions.png" mode=""></image>
					客户简介
				</view>
			</view>
			<view class="intro">
				<view style="display: flex;">
					<view class="words">
						{{info.brief}}
					</view>
					<view class="phone" @click="call(info)">
						<image src="https://oss.6mate.cn/mini/phone.png" mode=""></image>
					</view>
				</view>
				<!-- <view class="open">
					<view class="openstatus">
						非隐私资料是否允许公开
						<text>{{info.dataPublic==1?"是":'否'}}</text>
					</view>
					<view class="tips">
						不会公开姓名、身份证号、手机号、微信号、住址等个人隐私信息
					</view>
				</view> -->
			</view>

		</view>

		<view class="step">
			<view class="info">
				<view class="name">
					<image src="https://oss.6mate.cn/mini/Permissions.png" mode=""></image>
					客户照片
				</view>
				<view class="more" @click="khzptoggleCollapse">
					{{ khzpisCollapsed ? '展开' : '收起' }}
				</view>
			</view>
			<view class="intro" :class="{ collapsed: khzpisCollapsed }">
				<view class="photos">
					<u-upload :disabled="false" :deletable="false" :width="148" :height="148" :show-progress="false"
						:max-count="maxCount" :file-list="fileList"></u-upload>
				</view>
				<view class="isOK">
					<text class="label">是否公开</text>
					<text class="value">{{info.imagePublic==1?"是":'否'}}</text>
				</view>
			</view>
		</view>
		<view class="step">
			<view class="info">
				<view class="name">
					<image src="https://oss.6mate.cn/mini/User.png" mode=""></image>
					个人信息
				</view>
				<view class="more" @click="grxxtoggleCollapse">
					{{ grxxisCollapsed ? '展开' : '收起' }}
				</view>
			</view>
			<view class="intro" :class="{ collapsed: grxxisCollapsed }">

				<baseInfo :info="info.nameValueDtoList" />


			</view>
		</view>
		<view class="step">
			<view class="info">
				<view class="name">
					<image src="https://oss.6mate.cn/mini/Oval-love-two.png" mode=""></image>
					期望另一半信息
				</view>
				<view class="more" @click="lybtoggleCollapse">
					{{ lybisCollapsed ? '展开' : '收起' }}
				</view>
			</view>
			<view class="intro" :class="{ collapsed:lybisCollapsed }">
				<infoForOther :info="info.customerHope" />

			</view>
		</view>
		<view class="step">
			<view class="info">
				<view class="name">
					<image src="https://oss.6mate.cn/mini/Edit-one.png" mode=""></image>
					红娘备注
				</view>
				<!-- <view class="more" @click="remarktoggleCollapse">
					{{ remarkisCollapsed ? '展开' : '收起' }}
				</view> -->
			</view>
			<view class="intro" :class="{ collapsed:remarkisCollapsed }">
				<view>
					<view class="words">
						{{info.userNote}}
					</view>
					
					<view class="bettween">
						
					</view>
					<view class="itemCont" style="margin-top: 24rpx;">
						<view class="li">
							<view class="label">
								新增时间：
							</view>
							<view class="value">
								{{info.createTime}}
							</view>
						</view>
						<view v-if="info.updateTime" class="li">
							<view class="label">
								最近修改时间：
							</view>
							<view class="value">
								{{info.updateTime}}
							</view>
						</view>
					</view>
				</view>

			</view>
<!-- info.customerStatus -->
<!-- {{info.customerStatus}} -->
			<!-- <view v-if="info.customerStatus!='CANCEL'" class="handleFix"> -->
			<view v-if="info.customerStatus=='COMMON'" class="handleFix">
				<view class="bots">
					<view class="item1"  @click="cancel(info)">
						<image src="https://oss.6mate.cn/mini/Delete-themes.png" mode=""></image>
						<view class="">
							作废
						</view>
					</view>
					<view @click="changeToAPP(info)" class="item1">
						<image src="https://oss.6mate.cn/mini/App-store.png" mode=""></image>
						<view class="">转APP用户</view>
					</view>
					
					<view @click="edit(info)"  class="item1">
						<image src="https://oss.6mate.cn/mini/Edit-two.png" mode=""></image>
						<view class="">编辑</view>
					</view>
					<!-- <view class="item1">
						<image src="
https://oss.6mate.cn/mini/Share.png" mode=""></image>
						<view class="">分享</view>
						<button open-type="share" id="shareBtn"></button>
					</view> -->
					
				</view>
			</view>

			<!-- 转app -->
			<u-popup close-icon-color="#0F1417" close-icon-size="30" v-model="transferToAppMask" :closeable="true"
				:border-radius="30" mode="center">
				<view class="toAppBox">
					<transferToApp @refreshlist="refreshlist" :curId="curId" :curPhone="curPhone" :transferPhone="transferPhone" />
					
				</view>
			</u-popup>

		</view>
	</view>
</template>

<script>
	import { shareMixins} from "../../common/share.js"
	import CryptoJS from '../../node_modules/crypto-js/crypto-js.js'
	import infoForOther from './components/infoForOther.vue'
	import baseInfo from './components/baseInfo.vue'
	import transferToApp from './components/transferToApp.vue'
	export default {
		components: {
			infoForOther,
			baseInfo,
			transferToApp
		},
		mixins: [ shareMixins],
		data() {
			return {
				shareMixins:{
					path: '/subPack/crm/detail'
					// '/pages/index/index?id=1' // 分享的页面路径
				},
				curId:'',
				curPhone:'',
				transferPhone: '',
				maxCount: 3,
				info: {},
				transferToAppMask: false,
				// action: 'http://www.example.com/upload',
				index: 0,
				grxxisCollapsed: false,
				khzpisCollapsed: false,
				lybisCollapsed: false,
				remarkisCollapsed: false,
				showElement: true,
				fileList: [
					
				]
			}
		},
		onLoad(e) {
			this.shareMixins.path=`/subPack/crm/detail?id=${e.id}`
			this.$u.api.customerdetail({
					id: e?.id
				})
				.then(res => {
					console.log(res, 44557777);
					this.info = res?.data
					console.log(res?.data, 5555555555);
					this.fileList = res?.data?.images?.map(r => {
						return {
							url: r
						}
					})
					this.maxCount = this.fileList?.length
				});
		},
		// onPageScroll(e) {
		// 	if (e.scrollTop >= 100) {
		// 		this.showElement = true;
		//  } else {
		// 		this.showElement = false;
		// 	}
		// },
		methods: {
			refreshlist(){
				console.log('~~~~~~~~~~~~~~~~~');
				this.transferToAppMask = false
				uni.redirectTo({
					url:"/subPack/crm/index"
				})
			},
			// 作废
			cancel(val) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认作废吗？',
					// cancelColor:'#9b9b9b',//删除按钮颜色
					confirmColor: '#F23635', //确定按钮颜色
					success: function(res) {
						if (res.confirm) {
							that.$u.api
								.cancelCustomer({
									id: val.id
								})
								.then((res) => {
									uni.redirectTo({
										url:"/subPack/crm/index"
									})
								});
			
			
						} else if (res.cancel) {
							
						}
					}
				});
			
			},
			// 转APP用户
			changeToAPP(val) {
				this.transferToAppMask = true
			
				this.$u.api
					.getmobile({
						id: val.id
					})
					.then((res) => {
			
						let {
							decryptMobile,
							desenMobile
						} = res.data
						this.curId = val.id
						this.curPhone =desenMobile 
						this.transferPhone = this.decryptDES(decryptMobile,publicKey)
					});
			},
			// 编辑
			edit(val) {
				uni.navigateTo({
					url:"/subPack/crm/addCustomers/index?id="+val.id
				})
			},

			decryptDES(ciphertext, key) {
				const keyHex = CryptoJS.enc.Utf8.parse(key);
				const decrypted = CryptoJS.DES.decrypt({
					ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
				}, keyHex, {
					mode: CryptoJS.mode.ECB,
					padding: CryptoJS.pad.Pkcs7
				});

				return decrypted.toString(CryptoJS.enc.Utf8);
			},
			call(val) {
				let publicKey =
					`MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEPqHavyfprY52X/RFbuTq8qz9rLnbGPYMTgKZNL2dAp+1lj0zuwJyPf35/Icu1iO0iFps8lJ089oNCJNh1FXKs+sje0bXQIxFr0axmKtaeWzErD/9Iv5hvq01s1sPjZ3x4fvCvStue2rbXlWbm+PmtVssjsBbMajkbgghmM2RwQIDAQAB`

				this.$u.api
					.getmobile({
						id: val.id
					})
					.then((res) => {
						let {
							decryptMobile,
							desenMobile
						} = res.data

						let phoneNumber = this.decryptDES(decryptMobile, publicKey)

						uni.makePhoneCall({
							phoneNumber: phoneNumber, // 电话号码
							success: function() {
						 	console.log('拨打电话成功');
							},
							fail: function() {
								console.log('拨打电话失败');
							}
						});
					});

			},
			copyTextToClipboard(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					},
					fail: function() {
						console.log('复制失败');
						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			grxxtoggleCollapse() {
				this.grxxisCollapsed = !this.grxxisCollapsed;
			},
			khzptoggleCollapse() {
				this.khzpisCollapsed = !this.khzpisCollapsed;
			},
			lybtoggleCollapse() {
				this.lybisCollapsed = !this.lybisCollapsed;
			},
			remarktoggleCollapse() {
				this.remarkisCollapsed = !this.remarkisCollapsed;
			},
		}
	}
</script>

<style scoped lang="scss">
	
	.bettween{
		margin: 20rpx 0;
		height: 1rpx;
		background:rgba(245, 245, 245, 1) ;
			// border-bottom: 1rpx solid rgba(245, 245, 245, 1);
	}
	.detail {
		padding: 0 32rpx 150rpx;

		.toAppBox {
			margin: 0 auto;
			width: 670rpx;
			background: #FFFFFF;
		}

		.handleFix {
			margin-bottom: env(safe-area-inset-bottom);
			position: fixed;
			bottom: 24rpx;
			left: 24rpx;
			right: 24rpx;
			// width: 100%;
			height: 104rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 26rpx 44rpx 0rpx rgba(118, 112, 112, 0.2);
			border-radius: 116rpx 116rpx 116rpx 116rpx;

			.bots {
				padding: 0 48rpx;
				height: 104rpx;
				display: flex;
				align-items: center;
			justify-content: space-between;
			
			.item1 {
				margin-right: 60rpx;
					// flex: 1;
					display: flex;
					align-items: center;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
position: relative;
						
						#shareBtn {
						    width: 100%;
						    height: 100%;
						    position: absolute;
						    top: 50%;
						    left: 50%;
						    transform: translate(-50%, -50%);
						    opacity: 0;
						  }
					view {
						font-weight: 400;
						font-size: 28rpx;
						color: #5C6B8B;
						line-height: 40rpx;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}
			}
		}

		.step {
			padding-bottom: 24rpx;

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.name {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					color: #FA4A53;
					line-height: 40rpx;
					display: flex;
					align-items: center;


					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}

				.more {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #5C6B8B;
					line-height: 33rpx;
				}

			}

			.open {
				margin-bottom: 24rpx;
				margin-top: 20rpx;

				.openstatus {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 33rpx;

					text {}
				}

				.tips {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 20rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 23rpx;
					margin-top: 14rpx;
				}
			}

			.intro {
				overflow: hidden;
				transition: max-height 0.3s ease-out;
				max-height: 1000px;
				/* 一个足够大的值，表明默认展开 */
				margin-bottom: 24rpx;
			
				margin-top: 8rpx;

				.words {
					flex: 1;
					margin-right: 40rpx;
				}

				.phone {
					image {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.isOK {
					padding: 16rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.label {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(15, 20, 23, 0.7);
						line-height: 33rpx;
					}

					.value {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #0F1417;
						line-height: 36rpx;

					}

				}
			}

			.collapsed {
				max-height: 0;
				/* 当条件类collapsed生效时，内容收起 */
			}
		}
	}

	.list {
		.item {
			padding: 24rpx 0;
			margin-bottom: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.tops {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.photo {
						border-radius: 50%;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 33rpx;
						width: 72rpx;
						height: 72rpx;
						background: #419FF5;
						margin-right: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						&.girl {
							background: #F54141;
						}
					}

					.names {
						flex: 1;

						.name {
							display: flex;
							align-items: center;

							.fullname {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 28rpx;
								color: #0F1417;
								line-height: 33rpx;
							}

							.phone {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #0F1417;
								line-height: 36rpx;
								margin: 0 16rpx;
							}

							.copy {
								color: rgba(15, 20, 23, 0.6);
								background: #F6F6F6;
								line-height: 1;
								padding: 8rpx 16rpx;
								border-radius: 86rpx 86rpx 86rpx 86rpx;
							}
						}

						.code {
							margin-top: 2rpx;
							color: rgba(15, 20, 23, 0.6);
							display: flex;
							align-items: center;
							.copy{
								margin-left: 10rpx;
							}
						}
					}
				}

				.right {
					.status {
						width: 132rpx;
						height: 54rpx;
						background: #6F7274;
						border-radius: 140rpx 140rpx 140rpx 140rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 33rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						&.app {
							background: #1BAB6B;
						}

						&.doing {
							background: #1767DE;
						}
					}

				}
			}
		}
	}
</style>
